<!--财务账单列表弹窗-->
<template>
	<a-modal v-model:visible="visible" v-bind="option" class="activity-dialog">
		<template #title>
			<div>{{ title }}</div>
			<div id="dialog_header_search" />
		</template>
	</a-modal>
</template>

<script lang="ts" setup>
	import {computed, onMounted, onUnmounted, reactive, ref} from 'vue'
	import {MicroAppName, microApps} from '@/micros/apps'
	import XEUtils from 'xe-utils'

	const props = withDefaults(
		defineProps<{
			title: string
			name?: MicroAppName
			path?: string
			query: any
			width?: string | number
		}>(),
		{
			query: {},
			width: '95%'
		}
	)

	// @ts-ignore
	const query = computed(() => XEUtils.pick(props.query, v => v != null))

	const visible = ref<boolean>(true)

	const emits = defineEmits(['close'])
	const option = reactive({
		footer: null,
		width: props.width,
		centered: true,
		maskClosable: false,
		destroyOnClose: true,
		onCancel() {
			emits('close')
		}
	})

	onMounted(() => {
		if (props.path && props.name) {
			microApps.loadApp({
				name: props.name,
				props: {
					path: props.path,
					query: props.query,
					searchContainer: '#dialog_header_search'
				},
				container: '.activity-dialog .ant-modal-body'
			})
		}
	})

	onUnmounted(() => {
		if (props.name) {
			microApps.removeApp(props.name)
		}
	})
</script>

<style lang="less">
	.activity-dialog {
		overflow: hidden;

		.ant-modal-header {
			height: 55px;
			padding: 11px 24px;

			& > .ant-modal-title {
				line-height: 31px;
				display: flex;
				align-items: center;
				justify-content: space-between;

				#dialog_header_search {
					min-width: 600px;
					margin-right: 30px;
					font-weight: normal;
				}
			}
		}

		.ant-modal-body {
			min-height: 500px;
			max-height: calc(100vh - 200px);
			padding: 12px;
			min-height: 600px;
			background: #fff;
		}
	}
</style>
